<template>
  <div class="auth-row" style="margin-bottom: 10px; display: flex; align-items: center;">
    <!-- 第一个下拉框 -->
    <el-select v-model="auth.folder" placeholder="请选择文件夹" style="width: 200px;">
      <el-option label="销售部文件夹" value="销售部文件夹" />
      <el-option label="技术部文件夹" value="技术部文件夹" />
      <el-option label="行政部文件夹" value="行政部文件夹" />
    </el-select>

    <!-- 查看权限 -->
    <el-select placeholder="查看" style="width: 120px; margin-left: 10px;">
      <el-option label="查看详情" value="详情" />
    </el-select>

    <!-- 新增按钮 -->
    <el-button
      v-if="isFirst"
      type="success"
      icon="Plus"
      @click="addAuth"
      style="margin-left: 20px;"
    />

    <!-- 删除按钮 -->
    <el-button
      v-else
      circle
      type="danger"
      icon="Delete"
      @click="removeAuth(index)"
      style="margin-left: 27px;"
    />
  </div>
</template>

<script setup>
defineProps({
  auth: Object,
  index: Number,
  isFirst: Boolean
})

const emit = defineEmits(['add', 'remove'])

const addAuth = () => {
  emit('add')
}

const removeAuth = (index) => {
  emit('remove', index)
}
</script>